<template>
  <div>
    <!-- 文章标题 -->
    <div class="block">文章标题</div>
    <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>

    <!-- 文章编辑 -->
    <div class="block">文章编辑</div>
    <Editor
      ref="toastuiEditor"
      :initialValue="form.editValue"
      height="600px"
      :options="editOptions"
    />

    <!-- 文章描述 -->
    <div class="block">文章描述</div>
    <el-input
      type="textarea"
      rows="6"
      v-model="form.description"
      placeholder="请输入文章描述"
    ></el-input>

    <!-- 文章头图 -->
    <Upload uploadTitle="文章头图" v-model="form.thumb" />

    <!-- 文章分类 -->
    <div class="block">文章分类</div>
    <el-select
      v-model="form.select"
      @change="changeHandle"
      slot="prepend"
      placeholder="请选择分类"
    >
      <el-option
        v-for="item in blogType"
        :label="item.name"
        :value="item.id"
        :key="item.id"
      ></el-option>
    </el-select>

    <!-- 发送按钮 -->
    <div class="block">
      <el-button type="primary" @click="editBloghandle">{{
        buttonText
      }}</el-button>
    </div>
  </div>
</template>

<script>
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/vue-editor";
import Upload from "@/components/Upload";
import { getBlogType } from "@/api/blogType";
import { addBlog, findOneBlog, editBlog } from "@/api/blog";
import "@toast-ui/editor/dist/i18n/zh-cn";
export default {
  props: ["mode"], //当前模式是添加还是编辑
  data() {
    return {
      id: null,
      form: {
        title: "", //博客标题
        editValue: "", //博客内容
        description: "", //博客描述
        thumb: "", //博客头图
        select: "", //博客分类
      },
      blogType: [],
      editOptions: {
        language: "zh-CN",
      },
      buttonText: "发布文章",
    };
  },
  created() {
    //创建时获取博客分类数据
    getBlogType().then(({ data }) => {
      this.blogType = data;
    });

    if (this.mode === "edit") {
      this.id = this.$route.params.id;
      //创建时获取当前博客进行回填id
      findOneBlog(this.id).then(({ data }) => {
        this.form = data;
        //有些文章可能未分类
        this.form.select = data.category === null ? "" : data.category.id;
        //将markdown内容回填
        this.$refs.toastuiEditor.invoke("setHTML", data.htmlContent);
      });
      this.buttonText = "确认修改";
    }
  },
  components: {
    Editor,
    Upload,
  },

  methods: {
    //发布文章
    editBloghandle() {
      //判断消息是否已经填完

      //获取编辑内容
      let html = this.$refs.toastuiEditor.invoke("getHTML");
      let markdown = this.$refs.toastuiEditor.invoke("getMarkdown");
      let obj = {
        title: this.form.title,
        description: this.form.description,
        createDate: new Date().getTime(),
        categoryId: this.form.select,
        // toc 传递一个空数组过去，之后在服务器根据 markdown 的内容来生成 toc 目录
        toc: [],
        htmlContent: html,
        thumb: this.form.thumb,
        markdownContent: markdown,
      };

      //判断输入的信息是否完善
      if (obj.title && obj.htmlContent && obj.description && obj.categoryId) {
        if (this.mode === "edit") {
          //编辑文章
          editBlog({ id: this.id, data: obj }).then(() => {
            this.$message.success("修改成功");
            this.$router.push("/blogList");
          });
        } else {
          //添加文章
          addBlog(obj).then(() => {
            this.$message.success("发布成功");
            this.$router.push("/blogList");
          });
        }
      } else {
        this.$message.error("请完善文章所有信息");
      }
    },

    //解决分类数据没有实时更新问题
    changeHandle() {
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  margin: 15px 0;
  font-weight: 100;
}
</style>
